function Snake(el){
    // 保存地图
    this.el = el
    //蛇节的长
    this.len = 20
    //创建蛇保存
    this.snakeObj=[
        {x:3, y:2, color:'blue', el:null},
        {x:2, y:2, color:'yellow', el:null},
        {x:1, y:2, color:'yellow', el:null}
    ] 
    // 开始方向
    this.direction = 'right'
}
Snake.prototype.remove = function(){

    // 循环遍历
    for(let i = 0; i<this.snakeObj.length;i++){
        if(this.snakeObj[i].el){
            this.el.removeChild(this.snakeObj[i].el)
        }
    }
}


Snake.prototype.create=function(){
    // 清除
    this.remove()
    // 循环遍历创建
    for(let i = 0;i<this.snakeObj.length;i++){
        // 创建对象
        let divObj = document.createElement('div')
        // 设置样式
            divObj.style.width=this.len+'px'
            divObj.style.height=this.len+'px'
            divObj.style.position='absolute'
            divObj.style.left=this.snakeObj[i].x*this.len+'px'
            divObj.style.top=this.snakeObj[i].y*this.len+'px'
            divObj.style.background=this.snakeObj[i].color
            // 单独baocun
            this.snakeObj[i].el=divObj
        // 追加到页面
        this.el.appendChild(divObj)
        // console.log(i);
    }
}


Snake.prototype.move=function(){
    // 循环将构造函数中的蛇*数据+1
    for(let i = this.snakeObj.length-1;i>0;i--){
        this.snakeObj[i].x=this.snakeObj[i-1].x
        this.snakeObj[i].y=this.snakeObj[i-1].y
    }
    switch (this.direction) {
        case 'top':
            this.snakeObj[0].y -= 1
            break;
        case 'bottom':
            this.snakeObj[0].y += 1
            break;
        case 'left':
            this.snakeObj[0].x -= 1
            break;
        case 'right':
            this.snakeObj[0].x += 1
            break;
    }
    // 在创建蛇
    this.create()


}